<template>
	<div class="search">
		<div class="search-bg">
			<div class="search-input">
				<i class="fa fa-search"></i>
				<input type="text" v-model="name"/>
			</div>
		</div>
		<div class="class">
			<p>电影/电视剧/综艺</p>
		</div>
		<div class="info"  v-for="item in getDataList">
			<div class="img">
				<img :src="item.img"/>
			</div>
			<div class="movie-info">
				<p><span class="title">{{item.name}}</span><span class="score">{{item.score}}</span></p>
				<p class="message">{{item.type}}</p>
				<p class="message">{{item.date}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				name:'',
				movie:[],
				nowPlayData:[],
				comingPlayData:[],
			}
		},
		created(){
			this.getnowPlayData(),
			this.getcomingPlayData()
		},
		computed:{
			getDataList(){
				return this.movie.filter(item=> item.name.indexOf(this.name)!=-1)
			}
		},
		methods:{
			getnowPlayData(){
				var that=this;
				axios.get('/mock/nowPlayData.json')
				.then(response=>{
					if(response.status==200){
						if(response.data && response.data.nowPlayData){
							that.nowPlayData=response.data.nowPlayData;
							that.nowPlayData.forEach((item)=>{
								that.movie.push(item)
							})
							console.log(that.movie)
						}
					}
				})
				.catch(function(error){
					console.log(error);
				})
			},
			getcomingPlayData(){
				var that=this;
				axios.get('/mock/comingPlayData.json')
				.then(response=>{
					if(response.status==200){
						if(response.data && response.data.comingPlayData){
							that.comingPlayData=response.data.comingPlayData;
							that.comingPlayData.forEach((item)=>{
								that.movie.push(item)
							})
							console.log(that.movie)
						}
					}
				})
				.catch(function(error){
					console.log(error);
				})
			},
		},
		
	}
</script>

<style>
	.search-input{
		margin-left:20px;
		width:90%;
		border:#cccccc solid 1px;
		border-radius:10px;
		background-color:white;
		
	}
	.search-input input{
		width:90%;
		height:100%;
		border:none;
		outline:none;
	}
	i{
		margin-left:10px;
	}
	.class{
		border-top:1px solid #EBE8E3;
		border-bottom:1px solid #EBE8E3;
		padding-top:10px;
		padding-bottom:10px;
		padding-left:10px;
		font-weight: bold;
	}
	.search-bg{
		background-color:#fff5f0;
		height:20px;
		padding-top:15px;
		padding-bottom:15px;
	}
	.img{
		width:60px;
		float:left;
		padding-right:10px;
	}
	.img img{
		width:100%;
		
	}
	.info{
		padding:10px;
		height:80px;
		border-bottom:1px solid #EBE8E3;
	}
	.title{
		font-size:20px;
	}
	.score{
		float:right;
		color:#FAAF00;
	}
	.message{
		font-size:10px;
		margin-top:2px;
	}
</style>
